<template>
  <view class="picker-img">
    <view class="label">{{ label }}</view>
    <view class="img-wrap" @click="handleChooseCover">
      <view v-if="src" class="cover-wrap">
        <img class="cover" :src="src" mode="aspectFill" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: '',
    },
    src: {
      type: String,
      default: '',
    },
  },

  data() {
    return {};
  },

  methods: {
    handleChooseCover() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.$emit('change', res.tempFilePaths[0]);
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.picker-img {
  padding: 30rpx 40rpx;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  .img-wrap {
    position: relative;
    width: 200rpx;
    height: 200rpx;
    border: 1rpx solid #ddd;
    &::after {
      position: absolute;
      content: '';
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 30rpx;
      height: 4rpx;
      background: #ddd;
    }
    &::before {
      position: absolute;
      content: '';
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 4rpx;
      height: 30rpx;
      background: #ddd;
    }
    .cover-wrap {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      .cover {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
